<template>
    <div class="Lo_account">
        <header>
        <!-- 返回 -->
        <img @click='Lo_account_back' class="Lo_account_back" src="../../../static/imgs/return.png">
        <p>我的账户</p>

    </header>

    <section>
      
    
        <section class="account_cent">
            <article class="left">
                <p class="one">当前余额 (元)</p>
                <p class="two">￥ 0.00</p>
                <p class="three">冻结余额  &nbsp ￥ 0.00</p>
            </article>
            <article class="right">
              <router-link tag='span' to='Lo_ac_recharge'>
                <p class="Lo_ac_to_recharge">充值</p>
              </router-link>
            </article>
        </section>
        <article class="account_change">
                <p>账户明细</p>
                <img src="../../../static/imgs/account_down.png" alt="">
        </article>
        <div class="show">
            <article class="account_hide">
                <p  class="change">全部</p>
                <p>充值</p>
                <p>预约</p>
                <p>打赏</p>
                <p>退款</p>
                <ul class="ul">
                    <li></li>

                </ul>
            </article>
        </div>
        
    </section>

    </div>
</template>
<script>
    export default {
        name:'Lo_account',
        methods:{
        Lo_account_back:function(){
            this.$router.go(-1)
        }
    }
 }
</script>

<style scoped lang='less'>
.PxToRem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}


header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .PxToRem(height,88);
    .PxToRem(font-size,40);
    .Flex;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .PxToRem(width,55);
        .PxToRem(height,53);
      }
}

.account_cent{
        color:#ffffff;
        padding: 0 2%;
        .Flex;
        .PxToRem(height,450);
        background:#1cc6a3;
        article{flex:1;}
    .left{
        .one{
             .PxToRem(font-size,25);
             .PxToRem(margin-top,70);
        }
        .two{
            .PxToRem(font-size,80);
            .PxToRem(margin-top,50);
        }
        .three{
             .PxToRem(font-size,25);
             .PxToRem(margin-top,60);
        }
    }
    .right{
        p{
          .PxToRem(width,280);
          .PxToRem(height,90);
           background:#ff6600;
          .PxToRem(border-radius,50);
           text-align: center;
          .PxToRem(font-size,40);
          .PxToRem(line-height,90);
          .PxToRem(margin-top,140);
          .PxToRem(margin-left,20);
          
        }
    }
}
.account_change{
    .Flex;
    padding:3% 5%;
    border-bottom: 1px solid #ccc;
    justify-content:space-between;
      p{
          .PxToRem(font-size,40);
      }

      img{
          .PxToRem(width,47);
          .PxToRem(height,33);
      }
      img.chang{
          transform: rotate(180deg);
      }
      img.dong{
          animation: round 1s;
      }
      @keyframes round{
        0%{
          transform: rotate(0deg);
        }
        100%{
          transform: rotate(180deg);
        }
        
      }
}
.show{display:none ;}
.account_hide{
     position: relative;    
     .Flex;
     padding:3% 0;
     justify-content:space-around;
     border-bottom: 1px solid #ccc;
    .PxToRem(font-size,40);
    p{
      flex:1;
      text-align:center;
    }
    
    p.change{
       color:#1cc6a3;
      
    }
    ul{
      position:absolute;
      bottom: 0;
      width:100%;
      //li{width:20%;border-bottom: 5px solid #1cc6a3;}
    }
}



















</style>











